<template>
	<view>
		   <uni-section title="请选择申报学院" type="line">
		      <uni-data-select v-model="value1" :localdata="range" @change="change"></uni-data-select>
		    </uni-section>
		   <uni-section title="请选择申报课程内容" type="line">
		      <uni-data-select v-model="value2" :localdata="range" @change="change"></uni-data-select>
		    </uni-section>
		<view class="uni-form-item uni-column">
			<!-- <input class="uni-input" maxlength="10" placeholder="请输入标题" v-model="qtitle" /> -->
			<uni-section title="请输入标题" type="line"></uni-section>
			<uni-easyinput class="uni-mt-5" trim="all" v-model="qtitle" placeholder="请输入内容"></uni-easyinput>
		</view>
		<view class="uni-form-item uni-column">
			<!-- <input class="uni-input" maxlength="10" placeholder="请输入标题" v-model="qtitle" /> -->
			<uni-section title="请输参与成员" type="line"></uni-section>
			<uni-easyinput class="uni-mt-5" trim="all" v-model="qtitle" placeholder="请输入内容"></uni-easyinput>
		</view>
		
		<uni-section title="请输入内容说明" type="line">
			<uni-easyinput type="textarea" v-model="mycontent" placeholder="请输入内容"></uni-easyinput>
		</uni-section>
		
		<!-- <uni-section title="图片上传" type="line">
			<button  style="width: 500rpx; background-color:#55aaff; color:white;" @click="upload()">点击上传</button>
			<view >
				<view v-for="(i, index) in fileNameSt" :key="index">
				<image :src="'http://xg.kystu.cn:8085'+i"></image>
				</view>
			</view>
		</uni-section> -->
		<uni-section title="请输入备注" type="line">
			<uni-easyinput type="textarea" v-model="mycontent" placeholder="请输入内容"></uni-easyinput>
		</uni-section>	
		<uni-section title="请选择图片" type="line">
					<view class="example-body">
						<uni-file-picker limit="9" title="最多选择9张图片"></uni-file-picker>
					</view>
		</uni-section>
		<!-- <uni-section title="请选择文件" type="line">
					<view class="example-body">
						<uni-file-picker limit="5" file-mediatype="all" title="最多选择5个文件"></uni-file-picker>
					</view>
				</uni-section> -->
		<uni-section title="文件上传" type="line">
			<button  style="width: 500rpx; background-color:#55aaff; color:white;" @click="upload()">点击上传</button>
			<view >
				<view v-for="(i, index) in fileNameSt" :key="index">
				<image :src="'http://xg.kystu.cn:8085'+i"></image>
				</view>
			</view>
		</uni-section>		
				
		<uni-section >
			<button type="primary" style="width: 500rpx; background-color:#55aaff; color:white;" @click="Tosubmit()">提交</button>
		</uni-section>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imageStyles: {
									width: 64,
									height: 64,
									border: {
										radius: '50%'
									}
								},
								listStyles: {
									// 是否显示边框
									border: true,
									// 是否显示分隔线
									dividline: true,
									// 线条样式
									borderStyle: {
										width: 1,
										color: 'blue',
										style: 'dashed',
										radius: 2
									}
								},
				
				value1: 0,
				        range: [
				          { value1: 0, text: "信工学院" },
				          { value1: 1, text: "人文学院" },
				          { value1: 2, text: "经法学院" },
						  { value1: 3, text: "管理学院" },
						  { value1: 4, text: "机械学院" },
						  { value1: 5, text: "继续教育学院" },
				        ],
				value2: 0,
				        range: [
				          { value2: 0, text: "第一课" },
				          { value2: 1, text: "第二课" },
				          { value2: 2, text: "第三课" },
				        ],		
				
				token: '',
				url: 'http://xg.kystu.cn:8085/common/upload',
				fileName: '',
				array: [],
				index: 0,
				qtitle: '',
				mycontent: '',
				fileNameSt: [],
			}
		},
		methods: {
			change(e) {
			        console.log("e:", e);
			      },
			Tosubmit() {
				var _this = this;
				uni.request({
					url: 'http://xg.kystu.cn:8085/system/projectcontent_cj',
					method: "POST",
					data: {
						title: _this.qtitle,
						mycontent: _this.mycontent,
						upimage: _this.fileName
				 },
					header: {
						'Authorization': "Bearer " + _this.token
					},
					success: (res) => {
						if (res.data
							.code ==
							200) {
							uni.showToast({
								title: "上传成功",
								icon: 'exception',
								duration: 850
							});
						}
					}
				});
			},
			bindPickerChange: function(e) {
				this.index = e.detail.value;
			},
			upload() {
				var _this = this;
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						console.log(tempFilePaths);
						uni.uploadFile({
							url: _this.url, //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								'user': 'test'
							},
							header: {
								'Authorization': "Bearer " + _this.token
							},
							success: (uploadFileRes) => {
								console.log(uploadFileRes.data);
								uploadFileRes.data = JSON.parse(uploadFileRes.data);
								if (_this.fileName != null && _this.fileName != "") {
									_this.fileName = _this.fileName + ","
								}
								_this.fileName = _this.fileName + uploadFileRes.data.fileName;
								console.log(_this.fileName)
								_this.fileNameSt=_this.fileName.split(",")
								console.log(_this.fileNameSt[0])
							}
						});
					}
				});
			},
			onShow() {
				var _this = this;
				uni.getStorage({
					key: 'App-Token',
					success(res) {
						_this.token = res.data;
					}
				})


			}
		}
	}
</script>

<style>
	.example-body {
		text-align: center;
		    
			padding: 10px;
			padding-top: 0;
		}
	
		.custom-image-box {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
		}
	
	/* 	.text {
			font-size: 14px;
			color: #333;
		} */
	.text {
	    font-size: 12px;
	    color: #666;
	    margin-top: 5px;
	  }
	
	  .uni-px-5 {
	    padding-left: 10px;
	    padding-right: 10px;
	  }
	
	  .uni-pb-5 {
	    padding-bottom: 10px;
	  }

</style>
